<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>bind与model</title>
    <!--
    引入vue的js库
    -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!--view:html页面部分-->
<!--
    v-bind：用Vue对象中的某个值给指定属性单向赋值,简写：:属性="model键"
    v-model：双向绑定Vue对象的某个值和某个value属性值
-->
<div id="app">
    <a v-bind:href="baiduUrl">百度1</a>
    <br>
    <a :href="baiduUrl">百度2</a> <br><!--简写形式-->

    <select name="address" v-model="address">
        <option value="bj">北京</option>
        <option value="nj">南京</option>
        <option value="dj">东京</option>
        <option value="xj">西京</option>
    </select>
    <br>
    插值表达式:{{address}}
    <br>

    <textarea cols="30" rows="5" name="description" v-model="text"></textarea>
    <br>
    插值表达式:{{text}}

</div>
</body>
<script>
    new Vue({//固定格式,新建Vue对象
        el: "#app",//使用选择器指定Vue管控的区域
        data: {//定义数据键值对
            name: "zs",
            baiduUrl: "http://www.baidu.com",
            address: "bj",
            text: "This is a paragraph"
        }
    })
</script>
</html>